<template>
    <UxDialog :visible="visible" title="" @close="onClose()">
        <div class="logistics-remote-sign">

            <figure>
                <img src="@/assets/images/logistics/logistics-dialog-icon.png" alt="">
            </figure>

            <h3>Remote Area Details</h3>
            <h4>Remote areas are defined as regions where, in comparison to major cities and logistics hubs, transportation access is limited and shipping costs are higher.</h4>
            <p>
                <strong>Limitations of remote areas:</strong>
                <span>• Limited Shipping options &nbsp;&nbsp;• Longer transit times &nbsp;&nbsp;• Higher shipping costs</span>
            </p>

            <div class="logistics-remote-fixed" :class="{active:list.length > 0}">
                <h5>Shipping information for remote areas</h5>

                <form @submit.stop.prevent="onSubmit()">
                    <ul>
                        <li v-for="item in tabs" :key="item.name" @click="setTabsActive(item)" :class="{ active: tabs_active == item.weight }">
                            <svg-icon name="t-shirt-icon" v-if="item.icon == 't-shirt-icon'" />
                            <svg-icon name="long-sleeves-icon" v-if="item.icon == 'long-sleeves-icon'" />
                            <svg-icon name="sweatshirts-icon" v-if="item.icon == 'sweatshirts-icon'" />
                            <span>{{ item.name }}</span>
                        </li>
                    </ul>
                    <UserSearchName v-model="code" size="small" @change="onSubmit()" />
                </form>

            </div>

            <div class="logistics-remote-table" v-if="list.length > 0">
                <table>
                    <thead>
                        <tr>
                            <th>Country</th>
                            <th>Remote areas</th>
                            <th>Shipping method</th>
                            <th>Shipping time</th>
                            <th>First item</th>
                            <th>Additional item</th>
                        </tr>
                    </thead>
                    <tbody v-for="body in list" :key="body.iso_code">

                        <template v-for="(area,index) in body.areas">

                            <tr v-for="(item,idx) in area.methods" :key="item.region_name">

                                <td v-if="index == 0 && idx == 0" v-text="getCountryName(body.iso_code)" :rowspan="body.count"></td>
                                <td v-if="idx == 0" :rowspan="area.methods.length">
                                    <a @click="detail = area" v-text="area.region_name"></a>
                                </td>
                                <td v-text="item.name"></td>
                                <td v-text="getShippingTime(item)"></td>
                                <td>
                                    <CommonCurrencyRate :price="item.price" type="unit|price" />
                                </td>
                                <td>
                                    <CommonCurrencyRate :price="item.next_price" type="unit|price" />
                                </td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </div>

            <UxSearchEmpty v-else notify="No results found. Please try different postal code." />

            <CommonPage v-show="page_total > page_size" @current-change="onPageUpdate($event)" :current-page.sync="page_num" :page-size="page_size" :total.sync="page_total"></CommonPage>

            <UxLoading2 :loading="loading" />

            <UxDialog :visible="detail" title="" @close="detail = null">
                <div class="logistics-remote-detail">

                    <h2>List of Postal Codes</h2>
                    <p>For postal codes listed here, shipping will be charged based on the respective remote area's rates.</p>
                    <div class="logistics-remote-detail-table" v-if="detail">
                        <table>
                            <thead>
                                <tr>
                                    <th>Remote areas</th>
                                    <th>Postal code</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td v-text="detail.region_name"></td>
                                    <td>
                                        <p><span v-for="(item,idx) in getPostCode(detail.postal_codes)" :key="idx" v-text="item"></span></p>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                </div>
            </UxDialog>
        </div>
    </UxDialog>
</template>
<script>
export default {
    props: ['value', 'post_code'],
    data () {
        return {
            loading: false,
            page_total: 0,
            page_num: 1,
            page_size: 20,
            list: [],
            countries: [],
            detail: null,
            code: '',
            tabs_active: 0.18,
            tabs: [
                { icon: "t-shirt-icon", name: "T-shirt & tank tops", weight: 0.18, price: 1092, next_price: 698, },
                { icon: "long-sleeves-icon", name: "Long sleeves & shorts", weight: 0.24, price: 1324, next_price: 930, },
                { icon: "sweatshirts-icon", name: "Hoodies & sweatshirts & pants", weight: 0.47, price: 2215, next_price: 1822, },
            ]
        };
    },
    computed: {
        visible: {
            get () {
                const res = !!this.value
                return res
            },
            set (val) {
                this.$emit('input', !!val)
            }
        }
    },

    watch: {
        visible (newval, oldval) {
            if (newval) {
                this.code = this.post_code || ''
                this.loading = true;
                Promise.all([this.getCountryList(), this.search()]).then(() => this.loading = false)
            }
        }
    },

    methods: {
        async search () {
            const request = {
                post_code: (this.code || '').trim(),
                weight: this.tabs_active,
                page_size: this.page_size,
                page_num: this.page_num,
            }

            const response = await this.$http('Order.getShippingRemoteList', request)

            if (response.code == 0) {
                const data = response.data || []
                const result = [];

                data.map(item => {
                    try {
                        const methods = []
                        const ky_shipping = item.ky_shipping || {}
                        const pk_shipping = item.pk_shipping || {}
                        const tk_shipping = item.tk_shipping || {}

                        pk_shipping.is_open && methods.push(Object.assign(pk_shipping, { name: 'Standard shipping' }))
                        ky_shipping.is_open && methods.push(Object.assign(ky_shipping, { name: 'Fast shipping' }))
                        tk_shipping.is_open && methods.push(Object.assign(tk_shipping, { name: 'Express shipping' }))
                        item.methods = methods
                    } catch (err) {
                        item.methods = []
                    }

                    // 按国家合并
                    const active = result.find(i => i.iso_code == item.iso_code)

                    if (active) {
                        active.areas.push(item)
                    } else {
                        result.push({ count: 0, iso_code: item.iso_code, areas: [item] })
                    }
                })

                result.map(i => i.count = i.areas.reduce((pre, cur) => pre + cur.methods.length, 0))

                this.list = result
                this.page_num = request.page_num
                this.page_total = response.total || 0;
                this.code = request.post_code
            }
        },

        async getCountryList () {

            if (this.countries.length == 0) {
                const response = await this.$http('Resource.countris');
                this.countries = response.countries || []
            }
        },

        setTabsActive (item) {

            if (item.weight != this.tabs_active) {
                this.tabs_active = item.weight
                this.loading = true;
                this.search().then(() => this.loading = false)
            }
        },

        onClose () {
            this.visible = false;
        },

        onSubmit () {
            this.page_num = 1;
            this.loading = true;
            this.search().then(() => this.loading = false)
        },
        onPageUpdate (page_num) {
            this.page_num = page_num;
            this.search().then(() => this.loading = false)
        },
        getCountryName (code) {
            const active = this.countries.find(i => i.id == code)
            return active ? active.name : code
        },
        getShippingTime (channel) {
            return channel.need_time_min + ' - ' + channel.need_time_max + ' business days';
        },
        getPostCode (str) {
            return str.split(',').filter(i => i)
        }
    },
};
</script>
<style lang="scss" scoped>
.logistics-remote-sign {
    width: calc(100vw - 80px);
    height: calc(100vh - 112px);
    max-width: 1094px;
    box-sizing: border-box;
    padding: 0 24px 24px;
    margin-top: 32px;
    overflow: auto;

    & > figure {
        text-align: center;
        img {
            vertical-align: top;
            width: 52px;
            height: 52px;
        }
    }

    & > h3 {
        margin-top: 8px;
        height: 26px;
        font-size: 18px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 400;
        color: #000000;
        line-height: 26px;
        text-align: center;
    }
    & > h4 {
        margin-top: 6px;
        font-size: 14px;
        font-family: Roboto, Roboto;
        font-weight: 400;
        color: #555555;
        line-height: 16px;
        text-align: center;
    }

    & > p {
        margin-top: 18px;
        background: #fafafa;
        border-radius: 6px;
        border: 1px solid #e6e6e6;
        padding: 16px;
        strong {
            display: block;
            font-size: 14px;
            font-family: Roboto-Medium, Roboto;
            font-weight: 400;
            color: #000000;
            line-height: 18px;
        }
        span {
            display: block;
            margin-top: 10px;
            font-size: 14px;
            font-family: Helvetica;
            color: #292929;
            line-height: 18px;
        }
    }

    .logistics-remote-fixed {
        margin-top: 34px;
        padding-bottom: 15px;
        position: sticky;
        top: 0;
        background-color: #fff;

        & > h5 {
            font-size: 18px;
            font-family: Roboto-Medium, Roboto;
            font-weight: 400;
            color: #000000;
            line-height: 20px;
            text-align: center;
        }

        & > form {
            margin-top: 24px;
            display: flex;
            align-items: center;

            ul {
                display: flex;
                height: 40px;
                flex: 1;
                overflow: hidden;

                li {
                    display: flex;
                    align-items: center;
                    padding: 0 10px;
                    position: relative;
                    cursor: pointer;
                    color: #555555;
                    white-space: nowrap;
                    overflow: hidden;

                    & + li {
                        margin-left: 20px;
                    }

                    &::before {
                        content: '';
                        position: absolute;
                        left: 0;
                        bottom: 0;
                        right: 0;
                        height: 1px;
                        background: #e6e6e6;
                    }

                    &:hover {
                        color: #ea4c89;
                    }

                    span {
                        margin-left: 6px;
                        line-height: 40px;
                        font-size: 16px;
                        font-family: Roboto-Medium, Roboto;
                        font-weight: 400;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    &.active {
                        color: #ea4c89;
                        &::before {
                            height: 2px;
                            background: #ea4c89;
                        }
                    }
                }
                svg {
                    width: 18px;
                    min-width: 18px;
                    height: 18px;
                }
            }
            & > span {
                display: none;
                white-space: nowrap;
                font-size: 14px;
                font-family: Roboto, Roboto;
                font-weight: 400;
                color: #555555;
                padding: 6px 0;
                line-height: 20px;
                margin-left: 10px;
            }

            .user-search-name {
                position: relative;
                margin-left: 90px;
                &::before {
                    position: absolute;
                    right: 100%;
                    margin-right: 6px;
                    content: 'Postal code:';
                    white-space: nowrap;
                    font-size: 14px;
                    font-family: Roboto, Roboto;
                    font-weight: 400;
                    color: #555555;
                    line-height: 32px;
                }
                width: 200px;
                flex: none;
            }
        }

        &.active {
            &::after {
                content: '';
                position: absolute;
                left: 0;
                right: 0;
                bottom: -1px;
                height: 1px;
                background-color: #e6e6e6;
            }
        }
    }

    .logistics-remote-table {
        width: 100%;
        overflow-x: auto;
        overflow-y: visible;
        table {
            width: 100%;
            a {
                color: #087196;
                cursor: pointer;
                text-decoration: underline;
                &:hover {
                    color: #287e9c;
                    text-decoration: none;
                }
            }

            th {
                padding: 12px;
                font-size: 14px;
                font-family: Roboto-Medium, Roboto;
                font-weight: 500;
                color: #292929;
                line-height: 16px;
                border: 1px solid #e6e6e6;
                background: #fafafa;
                text-align: center;
                width: 16.67%;
            }
            td {
                padding: 16px;
                font-size: 14px;
                font-family: Roboto, Roboto;
                font-weight: 400;
                color: #000000;
                line-height: 16px;
                border: 1px solid #e6e6e6;
                text-align: center;
            }

            tbody:nth-child(2n + 1) {
                td {
                    background: #fafafa;
                }
            }
        }
    }

    & > .search-empty {
        flex: 1;
    }

    & > .common-page {
        margin-top: 24px;
        min-height: 28px;
        margin-left: auto;
    }
}

.logistics-remote-detail {
    width: calc(100vw - 80px);
    max-width: 1094px;
    box-sizing: border-box;
    padding: 26px 24px 24px;

    h2 {
        font-size: 18px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #000000;
        line-height: 26px;
        text-align: center;
    }
    p {
        margin-top: 6px;
        font-size: 14px;
        font-family: Roboto, Roboto;
        font-weight: 400;
        color: #555555;
        line-height: 20px;
        text-align: center;
    }

    .logistics-remote-detail-table {
        overflow-x: auto;
        overflow-y: visible;
    }

    table {
        margin-top: 17px;
        width: 100%;

        th {
            padding: 12px;
            font-size: 14px;
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            color: #292929;
            line-height: 16px;
            border: 1px solid #e6e6e6;
            background: #fafafa;
            text-align: center;
        }
        td {
            padding: 15px;
            height: 104px;
            font-size: 14px;
            font-family: Roboto, Roboto;
            font-weight: 400;
            color: #000000;
            line-height: 18px;
            border: 1px solid #e6e6e6;
            text-align: center;
            word-break: break-word;
            &:nth-child(2) {
                text-align: left;
            }

            p {
                display: flex;
                flex-wrap: wrap;
            }

            span {
                display: inline-block;
                vertical-align: top;
                margin: 5px 9px;
            }
        }

        tbody tr td:first-child {
            width: 28.7%;
        }
    }
}

@media (max-width: 960px) {
    .logistics-remote-sign .logistics-remote-fixed > form ul li span {
        font-size: 14px;
    }

    .logistics-remote-sign form {
        ul {
            width: 100%;
        }
        .user-search-name {
            margin-top: 10px;
            max-width: initial;
            width: calc(100% - 90px) !important;
        }
        flex-direction: column;
        padding: 0;
        strong {
            text-align: center;
        }
    }
}
</style>
